<template>
  <div class="suanfashengji_wrap">
    <div class="title_wrap">
      <div class="title_l">算法</div>
      <div class="title_r">
        <el-button
          class="bin_button calcImport"
          @click="isShowDialgeFn"
          type="primary"
          >算法导入</el-button
        >
      </div>
    </div>
    <div class="suanfa_main">
      <div class="table_warp">
        <el-table
          :border="true"
          class="bin_table"
          :data="tableData"
          style="width: 100%"
          height="style"
        >
          <el-table-column
            min-width="170"
            resizable
            label="算法名称"
            sortable
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div @click="handleClick" style="cursor: pointer">
                {{ scope.row.algorithmName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            min-width="170"
            resizable
            prop="algorithmFileType"
            label="算法类型"
            sortable
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            min-width="170"
            resizable
            prop="algorithmVersion"
            label="版本号"
            sortable
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            min-width="100"
            resizable
            label="状态"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div>{{ scope.row.status === 0 ? "下架" : "上架" }}</div>
            </template>
          </el-table-column>
          <el-table-column
            min-width="170"
            resizable
            prop="uploadUser"
            label="上传人"
            sortable
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            min-width="190"
            resizable
            prop="createTime"
            label="上传时间"
            sortable
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            resizable
            label="操作"
            min-width="140"
            align="center"
          >
            <template slot-scope="scope">
              <div class="caozuo_btns">
                <div
                  class="icon el-icon-edit"
                  @click="onEditFn(scope.row)"
                ></div>
                <div
                  class="icon el-icon-delete"
                  @click="onDeleteFn(scope.row)"
                ></div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="fenye_wrap">
        <div class="pageBox">
          <el-pagination
            class="bin_fenyeqi"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :pager-count="5"
            prev-text="上一页"
            next-text="下一页"
            popper-class="bin_fenyeqi_popper"
            :page-sizes="[10, 20, 50]"
            layout="sizes, total, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="onGetListFn"
            :total="pageTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog no_padding dialog-1000"
      title="算法导入"
      :visible.sync="dialogFlag"
      width="1000px"
      @close="resetDaoruDialogDataFn"
      top="10vh"
    >
      <div class="dialog_form">
        <div class="form_title">基本信息</div>
        <div class="dialog_form_main">
          <el-form
            ref="form"
            :model="form"
            :rules="formRules"
            label-width="110px"
            label-position="left"
          >
            <el-form-item label="文件格式:" prop="wenjianFormat">
              <el-radio-group class="bin_radio" v-model="form.wenjianFormat">
                <el-radio label="DLL"></el-radio>
                <el-radio label="LIB"></el-radio>
                <el-radio label="EXE"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="算法名称:" prop="suanfaName">
              <el-input
                class="bin_input"
                placeholder="请输入算法名称"
                maxlength="100"
                v-model="form.suanfaName"
              ></el-input>
            </el-form-item>
            <el-form-item label="算法类型:" prop="suanfaType">
              <el-select
                filterable
                class="bin_select"
                disabled
                v-model="form.suanfaType"
                placeholder="请选择算法类型"
              >
                <el-option label="判证" value="4"></el-option>
                <el-option label="融合" value="5"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="方法名称:"
              prop="fangfaName"
              v-if="form.wenjianFormat !== 'EXE'"
            >
              <el-input
                class="bin_input"
                maxlength="100"
                placeholder="请输入方法名称"
                v-model="form.fangfaName"
              ></el-input>
            </el-form-item>
            <el-form-item label="版本号:" prop="versionNumber">
              <el-input
                class="bin_input"
                placeholder="请输入版本号"
                maxlength="50"
                v-model="form.versionNumber"
              ></el-input>
            </el-form-item>
            <el-form-item label="版本描述:" prop="versionDesc">
              <el-input
                type="textarea"
                maxlength="500"
                class="bin_input"
                placeholder="请输入版本描述"
                v-model="form.versionDesc"
              ></el-input>
            </el-form-item>
            <el-form-item label="算法:" prop="fileObj">
              <div class="suanfa_content">
                <el-upload
                  action="#"
                  :http-request="uploadFileFn"
                  :limit="1"
                  :file-list="fileList"
                  :before-upload="beforeAvatarUpload"
                  :on-exceed="onExceedFn"
                  :show-file-list="false"
                >
                  <el-button class="bin_button" size="mini">选择文件</el-button>
                </el-upload>
                <div class="upload_file_list" v-if="fileList.length">
                  <div class="file_item">
                    <div class="file_name">{{ fileList[0].name }}</div>
                    <div
                      @click="delFileFn"
                      class="file_btn el-icon-delete"
                    ></div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="上传人:" prop="uploadPerson">
              <el-input
                class="bin_input"
                placeholder="请输入上传人"
                maxlength="50"
                v-model="form.uploadPerson"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态:" prop="suanfaStatus">
              <el-select
                filterable
                class="bin_select"
                v-model="form.suanfaStatus"
                placeholder="请选择状态"
                @change="onLineOrOffLineFn"
              >
                <el-option label="上架" :value="1"></el-option>
                <el-option label="下架" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="form_btns">
                <el-button class="bin_button" @click="onFormCancel"
                  >取消</el-button
                >
                <el-button
                  class="bin_button"
                  type="primary"
                  @click="onFormSubmit"
                  >开始导入</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="load_wrap" v-if="isDaoruStatus">
        <div class="load_item load_ing" v-show="isDaoruStatus === 'ing'">
          <div class="icon el-icon-loading"></div>
          <div>导入中</div>
        </div>
        <div class="load_item load_succ" v-show="isDaoruStatus === 'succ'">
          <div>导入完成</div>
        </div>
        <div class="load_item load_fail" v-show="isDaoruStatus === 'fail'">
          <div>导入失败</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFlag: false,
      tableData: [],
      form: {
        wenjianFormat: "DLL",
        suanfaName: "",
        suanfaType: "4", // 默认是4 禁止选择
        fangfaName: "",
        versionNumber: "",
        versionDesc: "",
        uploadPerson: "",
        suanfaStatus: 0,
        fileObj: null,
      },
      fileList: [],
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,
      isDaoruStatus: null,
      formRules: {
        wenjianFormat: [
          { required: true, message: "请选择文件格式~", trigger: "blur" },
        ],
        suanfaName: [
          { required: true, message: "算法名称不能为空~", trigger: "blur" },
        ],
        suanfaType: [
          { required: true, message: "算法类型不能为空~", trigger: "blur" },
        ],
        fangfaName: [
          { required: true, message: "方法名称不能为空~", trigger: "blur" },
        ],
        versionNumber: [
          { required: true, message: "版本号不能为空~", trigger: "blur" },
        ],
        versionDesc: [
          { required: true, message: "版本描述不能为空~", trigger: "blur" },
        ],
        fileObj: [
          { required: true, message: "请先上传算法文件~", trigger: "blur" },
        ],
        uploadPerson: [
          { required: true, message: "上传人不能为空~", trigger: "blur" },
        ],
        suanfaStatus: [
          { required: true, message: "状态不能为空~", trigger: "blur" },
        ],
      },
      isDialogType: null,
      isCurrentItem: null,
    };
  },
  mounted() {
    this.onGetListFn();
  },
  methods: {
    // 算法导入
    isShowDialgeFn() {
      this.dialogFlag = true;
      this.isDialogType = "create";
    },
    // table-修改
    onEditFn(item) {
      this.isCurrentItem = item;
      this.form = {
        wenjianFormat: item.algorithmFileType.toUpperCase(),
        suanfaName: item.algorithmName,
        suanfaType: item.algorithmType.toString(),
        fangfaName: item.functionName,
        versionNumber: item.algorithmVersion,
        versionDesc: item.versionDescription,
        uploadPerson: item.uploadUser,
        suanfaStatus: item.status,
        fileObj: "edit-2024/05/09/15:28:00",
      };
      this.fileList = [
        {
          name: item.algorithmFilePath || "--",
        },
      ];
      this.isDialogType = "edit";
      this.dialogFlag = true;
    },
    // table-删除
    onDeleteFn(item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = item.id;
          this.$api.sfsjTableDelItemApi(data).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message.error("接口错误！");
            }
            this.currentPage = 1;
            this.onGetListFn();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onExceedFn() {
      this.$message.error("请先删除原有算法,再进行上传~");
    },
    // 上传算法的前置
    beforeAvatarUpload(file) {
      //   console.log("上传前", file);
      // const isImg = file.size / 1024 / 1024 < 2;
      // if (!isImg) {
      //   this.$message.error("上传头像图片大小不能超过 2MB!");
      // }
      // const isType = file.type === "image/png";
      // const isType2 = file.type === "image/jpeg";
      // if (!isType && !isType2) {
      //   this.$message.error("上传头像图片格式为png或jpg");
      // }
      // return (isType || isType2) && isImg;
    },
    // 上传算法
    uploadFileFn(option) {
      console.log(option);
      this.fileList = [{ name: option.file.name, file: option.file }];
      this.$set(this.form, "fileObj", option.file);
    },
    // 删除算法
    delFileFn() {
      this.fileList = [];
      this.$set(this.form, "fileObj", null);
    },
    // 弹窗-取消
    onFormCancel() {
      this.dialogFlag = false;
    },
    // 弹窗-提交
    onFormSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.isDialogType === "create") {
            this.sfsjDaoruFn();
          } else if (this.isDialogType === "edit") {
            this.sfsjEditFn();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 算法升级导入逻辑
    sfsjDaoruFn() {
      this.isDaoruStatus = "ing";
      let data = {
        algorithmFileType: this.form.wenjianFormat.toUpperCase(), //dll
        algorithmName: this.form.suanfaName,
        algorithmType: this.form.suanfaType, //ronghe -5 panzheng -4
        functionName: this.form.fangfaName,
        algorithmVersion: this.form.versionNumber,
        versionDescription: this.form.versionDesc,
        algorithmFile: this.form.fileObj,
        uploadUser: this.form.uploadPerson,
        status: this.form.suanfaStatus, //0-下架 1-商家
      };
      this.$api.sfsjDaoruApi(data).then(
        (res) => {
          if (res.code === 200) {
            this.isDaoruStatus = "succ";
            this.currentPage = 1;
            this.onGetListFn();
          } else {
            this.isDaoruStatus = "fail";
          }
        },
        (err) => {
          this.isDaoruStatus = "fail";
        }
      );
    },
    // 算法升级编辑修改逻辑
    sfsjEditFn() {
      this.isDaoruStatus = "ing";
      let algorithmFile =
        this.form.fileObj === "edit-2024/05/09/15:28:00"
          ? null
          : this.form.fileObj;
      let algorithmFilePath =
        this.form.fileObj === "edit-2024/05/09/15:28:00"
          ? this.isCurrentItem.algorithmFilePath
          : null;
      let data = {
        algorithmFileType: this.form.wenjianFormat.toUpperCase(), //dll
        algorithmName: this.form.suanfaName,
        algorithmType: this.form.suanfaType, //ronghe -5 panzheng -4
        functionName: this.form.fangfaName,
        algorithmVersion: this.form.versionNumber,
        versionDescription: this.form.versionDesc,
        algorithmFilePath,
        algorithmFile,
        uploadUser: this.form.uploadPerson,
        status: this.form.suanfaStatus, //0-下架 1-商家
        id: this.isCurrentItem.id,
      };
      this.$api.sfsjEditApi(data).then(
        (res) => {
          if (res.code === 200) {
            this.isDaoruStatus = "succ";
            this.currentPage = 1;
            this.onGetListFn();
          } else {
            this.isDaoruStatus = "fail";
          }
        },
        (err) => {
          this.isDaoruStatus = "fail";
        }
      );
    },
    // 上架下架前置接口判断
    async onLineOrOffLineFn(val) {
      if (val === 1) {
        if (!this.form.suanfaName) {
          this.$message.error("算法名称不能为空~");
          this.form.suanfaStatus = 0;
          return;
        }
        if (!this.form.suanfaType) {
          this.$message.error("算法类型不能为空~");
          this.form.suanfaStatus = 0;
          return;
        }
        let algorithmId = (this.isDialogType = "edit"
          ? this.isCurrentItem.id
          : null);
        let params = {
          algorithmName: this.form.suanfaName,
          algorithmType: this.form.suanfaType,
          algorithmId,
        };
        let res = await this.$api.sfsjOnlineOrOfflineApi(params);
        console.log(res.result);
        if (!res.result) {
          this.$confirm("上架该算法时，其他同名算法将自动下架", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {})
            .catch(() => {
              this.form.suanfaStatus = 0;
            });
        }
      }
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.onGetListFn();
    },
    // 获取算法list
    async onGetListFn() {
      let params = {
        algorithmsType: [4],
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      let res = await this.$api.sfsjTableListApi(params);
      this.tableData = res.result.content;
      this.pageTotal = res.result.totalSize;
    },
    // 重置导入弹窗中的数据
    resetDaoruDialogDataFn() {
      this.isDaoruStatus = null;
      this.isDialogType = null;
      this.form = {
        wenjianFormat: "DLL",
        suanfaName: "",
        suanfaType: "4",
        fangfaName: "",
        versionNumber: "",
        versionDesc: "",
        uploadPerson: "",
        suanfaStatus: 0,
        fileObj: null,
      };
      this.fileList = [];
    },
    handleClick() {
      this.$router.push({
        path: "guanlianpanzheng",
        query: {
          name: "guanlianpanzheng",
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.suanfashengji_wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #02fff4;
  background: rgba(2, 82, 107, 0.6);
  display: flex;
  flex-direction: column;
  .title_wrap {
    width: 100%;
    height: 60px;
    flex: 0 0 auto;
    background-color: rgba(2, 255, 244, 0.15);
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #02fff4;
    .title_l {
      font-size: 20px;
      color: #fff;
      padding-left: 12px;
      position: relative;
      font-weight: 700;
      &::after {
        content: "";
        position: absolute;
        width: 5px;
        height: 20px;
        background-color: #02fff4;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .title_r {
      .calcImport {
        text-indent: 24px;
        position: relative;
        &::before {
          width: 18px;
          height: 18px;
          background: url("../../../assets/expot.png") center center no-repeat;
          background-size: 100% 100%;
          position: absolute;
          left: 20px;
          top: 10px;
          content: "";
        }
      }
    }
  }
  .suanfa_main {
    flex: 1 1 auto;
    width: 100%;
    height: 0;
    box-sizing: border-box;
    padding: 20px 20px 10px;
    display: flex;
    flex-direction: column;
    .table_warp {
      flex: 1 1 auto;
      height: 0;
      .caozuo_btns {
        font-weight: 700;
        color: #02fff4;
        font-size: 24px;
        .icon {
          margin: 0 5px;
          cursor: pointer;
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
    .fenye_wrap {
      flex: 0 0 auto;
      .pageBox {
        height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .pageInfo {
          height: 18px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          text-align: center;
          font-style: normal;
          text-transform: none;
          .size {
            color: #02fff4;
          }
        }
      }
    }
  }
  ::v-deep .no_padding {
    .el-dialog__body {
      padding: 0;
    }
  }
  .dialog_form {
    .form_title {
      width: 100%;
      height: 50px;
      background: rgba(2, 255, 244, 0.15);
      color: #fff;
      line-height: 50px;
      box-sizing: border-box;
      padding: 0 32px;
      font-size: 18px;
    }
    ::v-deep .dialog_form_main {
      box-sizing: border-box;
      padding: 20px 30px;
      .el-form {
        .el-form-item {
          margin-bottom: 24px;
          &:last-child {
            margin-bottom: 10px;
          }
          .el-form-item__label {
            color: #fff;
            font-size: 18px;
          }
        }
      }
    }
    ::v-deep .suanfa_content {
      .el-upload {
        width: 40%;
        .bin_button {
          width: 100%;
        }
      }
      .upload_file_list {
        .file_item {
          width: 100%;
          height: 40px;
          font-size: 16px;
          margin-top: 10px;
          display: flex;
          align-items: center;
          .file_name {
            flex: 1 1 auto;
            width: 0;
            height: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            color: #fff;
            background-color: rgba(2, 255, 244, 0.2);
          }
          .file_btn {
            cursor: pointer;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #02fff4;
            font-size: 24px;
            font-weight: 500;
            flex: 0 0 auto;
            margin-left: 10px;
            background-color: rgba(2, 255, 244, 0.2);
            &:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
  .load_wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 40px;
    border-top: 1px solid #02fff4;
    .load_item {
      width: 100%;
      height: 44px;
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      box-sizing: border-box;
      &.load_ing {
        box-shadow: inset 0px 0px 20px 1px #02fff4;
        background: rgba(0, 105, 138, 0.3);
        border-color: rgba(2, 255, 244, 0.5);
        color: #02fff4;
        .icon {
          margin-right: 6px;
          font-weight: 700;
        }
      }
      &.load_succ {
        box-shadow: inset 0px 0px 20px 1px #26da9f;
        background-color: rgba(34, 154, 110, 0.3);
        border-color: #07cd8c;
        color: #26da9f;
      }
      &.load_fail {
        box-shadow: inset 0px 0px 20px 1px #c7002f;
        background-color: rgba(199, 0, 47, 0.3);
        border-color: rgba(199, 0, 47, 0.5);
        color: #c7002f;
      }
      &.hide {
        display: none;
      }
    }
  }
}
</style>
